<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Markdown阅读器</title>
    <style>
        :root {
            --nav-width: 260px;
            --primary-color: #2c3e50;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            min-height: 100vh;
        }

        /* 左侧导航样式 */
        #nav {
            width: var(--nav-width);
            background: #f8f9fa;
            padding: 20px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            border-right: 1px solid #ddd;
        }

        .nav-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 1em;
            color: var(--primary-color);
        }

        .nav-item {
            padding: 8px 12px;
            margin: 4px 0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
            text-decoration: none;
            display: block;
        }

        .nav-item:hover {
            background: #e9ecef;
            color: var(--primary-color);
        }

        /* 内容区域样式 */
        #content {
            flex: 1;
            margin-left: var(--nav-width);
            padding: 20px 20px 20px 85px;
            max-width: 80%;
        }

        /* Markdown内容样式 */
        .markdown-body {
            line-height: 1.6;
            padding: 30px 30px 30px 30px;
        }

        .markdown-body h1 {
            color: var(--primary-color);
            border-bottom: 2px solid #eee;
            padding-bottom: 0.3em;
            margin-top: 1.5em;
        }

        /* 代码块样式 */
        pre {
            background: #f6f8fa;
            padding: 16px;
            border-radius: 6px;
            overflow-x: auto;
        }
        /* 基础表格样式 */
        .markdown-body {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            background: white;
        }

        .markdown-body th,
        .markdown-body td {
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
            text-align: left;
        }

        .markdown-body th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #2c3e50;
        }

        .markdown-body tr:nth-child(even) {
            background-color: #fafafa;
        }

        /* 响应式处理 */
        @media (max-width: 768px) {
            .markdown-body {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
        }
    </style>
</head>
<body>
    <nav id="nav">
        <div class="nav-title">文档导航</div>
        <div id="nav-items">

        </div>
    </nav>

    <main id="content"></main>

    <!-- 依赖库 -->
    <script src="highlight.min.js"></script>
    <script src="scripts.bundle.js"></script>
    <script src="plugins.bundle.js"></script>
    <script src="datatables.bundle.js"></script>
    <script src="jquery.js"></script>
    <script src="create-app.js"></script>
    <script src="widgets.js"></script>
    <script src="marked.min.js"></script>
    <script src="fullcalendar.bundle.js"></script>
    <link rel="stylesheet" href="github.min.css">
    <link rel="stylesheet" href="style.bundle.css">

    <script>
        // 配置Markdown解析
        marked.setOptions({
            breaks: true,
            gfm: true,
            tables: true,
            highlight: (code, lang) => {
                const validLang = hljs.getLanguage(lang) ? lang : 'plaintext'
                return hljs.highlight(code, { language: validLang }).value
            }
        })

        // 加载MD文件并初始化
        async function init() {
            try {
                // 加载Markdown文件
                const response = await fetch('PluGrid.md', {
                    headers: { 'Content-Type': 'text/plain; charset=utf-8' }
                })
                
                if (!response.ok) throw new Error('文件加载失败')
                const mdContent = await response.text()

                // 转换Markdown
                const htmlContent = marked.parse(mdContent)
                document.getElementById('content').innerHTML = `
                    <div class="markdown-body row">${htmlContent}</div>
                `

                // 生成导航
                generateNavigation()
                setupSmoothScroll()
            } catch (error) {
                console.error('初始化失败:', error)
                document.getElementById('content').innerHTML = `
                    <div class="error">${error.message}</div>
                `
            }
        }

        // 自动生成导航
        function generateNavigation() {
            const item = findSubheadingsUnderH2();
            CreateTitle(item)
            /*
            const navContainer = document.getElementById('nav-items')
            // 清空现有导航
            navContainer.innerHTML = ''
            item.forEach((h1, index) => {
                const navUl = document.createElement('ul')
                const navItem = document.createElement('li')
                navItem.className = 'nav-item'
                navItem.textContent = h1.textContent
                h1.id = `section-${index}`
                navContainer.appendChild(navItem)
                h1.subheadings.fetch((h2,index) => {

                })
            })
            // 生成导航项
            headings.forEach((h1, index) => {
                const navItem = document.createElement('a')
                navItem.className = 'nav-item'
                navItem.textContent = h1.textContent
                navItem.href = `#section-${index}`
                
                // 添加ID用于跳转定位
                h1.id = `section-${index}`
                navContainer.appendChild(navItem)


            })*/
        }

        // 平滑滚动配置
        function setupSmoothScroll() {
            document.querySelectorAll('.nav-item').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault()
                    const targetId = this.getAttribute('href')
                    const targetElement = document.querySelector(targetId)
                    
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        })
                    }
                })
            })
        }
        function findSubheadingsUnderH2() {
            const h2Elements = document.querySelectorAll('.markdown-body h2');
            const result = [];

            h2Elements.forEach((h2, index) => {
                const subheadings = [];
                let currentElement = h2.nextElementSibling;

                // 遍历后续兄弟元素，直到遇到下一个h2或末尾
                while (currentElement && currentElement.tagName.toLowerCase() !== 'h2') {
                const tagName = currentElement.tagName.toLowerCase();
                if (tagName === 'h3' || tagName === 'h4') {
                    subheadings.push(currentElement);
                }
                currentElement = currentElement.nextElementSibling;
                }

                result.push({
                h2: h2,
                subheadings: subheadings
                });
            });
            console.log(result);
            return result;
        }

        function CreateTitle(item)
        {
            let str = `
            <div class="menu menu-column menu-title-gray-800 menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary menu-arrow-gray-500"
                data-kt-menu="true" data-kt-menu-expand="false">
                    <div data-kt-menu-trigger="click" class="menu-item menu-accordion hover show">`
            item.forEach(x =>{
                str += `
                    <span class="menu-link">
						<span class="menu-icon">	
							
							<span class="svg-icon svg-icon-2">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
									<path d="M21 9V11C21 11.6 20.6 12 20 12H14V8H20C20.6 8 21 8.4 21 9ZM10 8H4C3.4 8 3 8.4 3 9V11C3 11.6 3.4 12 4 12H10V8Z" fill="currentColor"></path>
									<path d="M15 2C13.3 2 12 3.3 12 5V8H15C16.7 8 18 6.7 18 5C18 3.3 16.7 2 15 2Z" fill="currentColor"></path>
									<path opacity="0.3" d="M9 2C10.7 2 12 3.3 12 5V8H9C7.3 8 6 6.7 6 5C6 3.3 7.3 2 9 2ZM4 12V21C4 21.6 4.4 22 5 22H10V12H4ZM20 12V21C20 21.6 19.6 22 19 22H14V12H20Z" fill="currentColor"></path>
								</svg>
							</span>
							<!--end::Svg Icon-->
						
						</span>
						<span class="menu-title">${x.h2.innerText}</span>
						<span class="menu-arrow"></span>
					</span>
                `
                x.subheadings.forEach((y, index) => {
                    y.id = `section-${index}`
                    str += `
                    <div class="menu-sub menu-sub-accordion menu-active-bg show" kt-hidden-height="39" style="">
						<div class="menu-item">
							<a class="menu-link" href="#section-${index}" >
								<span class="menu-bullet">
									<span class="bullet bullet-dot"></span>
								</span>
								<span class="menu-title">${y.innerText}</span>
							</a>
						</div>
					</div>
                    `
                })
                str += `</div> </div>`
            })
            $("#nav-items").append(str)
        }
        // 初始化应用
        init()
    </script>
</body>
</html>